import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Form, Input, Button, Checkbox, Card } from "antd";
import "./../../assets/css/login.less";
import loginLogo from "./../../assets/img/loginLogo.png";
export default class index extends Component {
  state = {
    account: "",
    password: "",
  };
  onFinish = (values) => {
    console.log("Success:", values);
  };
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  render() {
    return (
      <div className="con">
        <Card
          className="loginForm"
          bordered={true}
          hoverable={true}
          cover={<img src={loginLogo}></img>}
        >
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your username!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="Password"
              name="Password"
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
              ]}
            >
              <Input.Password
              // value={this.state.password}
              // onChange={(e) => {
              //   this.setState({ password: e.target.value });
              // }}
              />
            </Form.Item>
            <Form.Item
              label="PasswordConfirm"
              name="PasswordConfirm"
              dependencies={["Password"]}
              rules={[
                {
                  required: true,
                  message: "Please input your password!",
                },
                (par) => ({
                  validator(rules, value, callback) {
                    // console.log("rules",rules);
                    const { getFieldValue } = par;
                    if (!value || getFieldValue("Password") === value) {
                      callback();
                    } else {
                      callback("两次输入密码不一致");
                    }
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
              {/* <Link to="/register">没有账号？去注册</Link> */}
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
